<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>文件备份</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box" style="padding-top: 48px;">
            <div class="back-up-item">
                <span>开启自动备份</span>
                <el-switch
                    v-model="selectData.isAutoBackup"
                    active-color="#13ce66"
                    inactive-color="#dcdfe6"
                    @change="Switch">
                </el-switch>
            </div>
            <div class="back-up-item">
                <div class="item-title">备份信息：</div>
                <div class="item-content">
                    <p>备份模式： {{ selectData.backupMode }}</p>
                    <p>最新备份日期： {{ selectData.latestBackupDate }}</p>
                    <p>备份服务器： {{ selectData.backupServer }}</p>
                    <p>备份地址： {{ selectData.backupDir }}</p>
                    <p>备份周期： {{ selectData.backupPeriod }}</p>
                    <p>备份日期： {{ selectData.backupTime }}</p>
                </div>
            </div>
            <div class="back-up-item">
                <div class="btn-item">
                    <el-button class="button-style " @click="restore">一键恢复</el-button>
                    <p v-if="selectData.isRecover"><i class="el-icon-loading"></i>{{ selectData.recoverStatus }}</p>
                    <p v-else>{{ selectData.recoverStatus }}</p>
                </div>
                <div class="btn-item">
                    <el-button class="button-style " @click="backup">手动备份</el-button>
                    <p v-if="selectData.isBackup"><i class="el-icon-loading"></i>{{ selectData.backupStatus }}</p>
                    <p v-else>{{ selectData.backupStatus }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            // VueEditor,
            BreadCrumbBack
        },
        data () {
            return {
                backUpSwitch: true,
                selectData: ''
            }
        },
        created () {
            let self = this
            self.selectInfo()
        },
        methods: {
            selectInfo(){
                let self =  this
                self.$http.get('/dataplatform/backup/get').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data){
                            self.selectData = res.data
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            Switch(){
                let self = this
                self.$http.post('/dataplatform/backup/switch',{
                    switchOn: self.selectData.isAutoBackup
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (self.selectData.isAutoBackup) {
                            self.$message({
                                message: '开启成功',
                                type: 'success'
                            })
                        }else{
                            self.$message({
                                message: '关闭成功',
                                type: 'success'
                            })
                        }
                        self.selectData = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 恢复
            restore(){
                let self =  this
                if(self.selectData.isRecover){
                    self.$message({
                        message: '当前无法手动恢复：有备份或恢复正在进行中',
                        type: 'success'
                    })
                    return
                }
                self.$confirm('是否一键恢复?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.post('/dataplatform/backup/recover').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '一键恢复成功',
                                type: 'success'
                            })
                            self.selectInfo()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
				})
            },
            // 备份
            backup(){
                let self =  this
                if(self.selectData.isBackup){
                    self.$message({
                        message: '当前无法手动备份：有备份或恢复正在进行中',
                        type: 'success'
                    })
                    return
                }
                self.$confirm('是否手动备份?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.post('/dataplatform/backup/manual').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '手动备份成功',
                                type: 'success'
                            })
                            self.selectInfo()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
				})
            }
        }
    }
</script>

<style lang="scss" scope>
    .back-up-item{
        overflow: hidden;
        margin-bottom: 20px;
        span{
            font-size: 16px;
            margin-right: 15px;
        }
        .item-title{
            font-size: 14px;
            color: #462b2b;
            margin-top: 10px;
        }
        .item-content{
            margin-top: 20px;
            width: 80%;
            height: 200px;
            border: solid 1px #d9d9d9;
            padding: 20px;
            box-sizing: border-box;
            p{
                font-size: 14px;
                color: #474747;
                margin-bottom: 15px;
            }
        }
        .btn-item{
            float: left;
            margin-top: 30px;
            width: 40%;
            p{
                margin-top: 20px;
                font-size: 14px;
                color: #727272;
                i{
                    font-size: 12px;
                    color: #1277eb;
                    margin-right: 5px;
                }
            }
        }
        .button-style{
            background: #c82011;
            span{
                color: #fff;
                margin-right: 0;
            }
        }
    }
    #adminversion{
        .button-style{
            width: 90px;
            margin: 50px auto;
            display: block;
        }
    }

</style>
